<template>
	<view class="order-other-info">
		<card title="其他信息" v-if="orderInfo.useMethod || orderInfo.bookDeclare"> 
			<view v-if="showInfo" class="desc">
				<view v-if="orderInfo.useMethod">
					<view class="otherInfo-title">
						使用方法
					</view>
					<view class="otherInfo-desc">
							<rich-text :nodes="enter(orderInfo.useMethod)"></rich-text>
					</view>					
				</view>
				<view v-if="orderInfo.bookDeclare">
					<view class="otherInfo-title">
						预订说明/预订须知
					</view>
					<view class="otherInfo-desc">
							<rich-text class="" :nodes="enter(orderInfo.bookDeclare)"></rich-text>
					</view>					
				</view>				
			</view>			
			<basic-button @click="toggleShow" type="bright" border width="690rpx" height="80rpx">
				{{!showInfo ? '点击查看其他信息':'点击收起其他信息'}}
			</basic-button>
		</card>	
	</view>
</template>
<script>
import card from '../../../components/card'
export default {
	name: 'order-other-info',
	props: {
		orderInfo : { type: Object, default:()=>{return null} }
	},
	components: {
		card
	},
	data() {
		return {
			showInfo: false
		}
	},
	methods: {
		enter(str){
			return str.replace(/\n/g,"<br/>").replace(/INVALID/g,'*');
		},
		toggleShow(){
			this.showInfo = !this.showInfo
		}
	},
}
</script>
<style lang="less">
.order-other-info{
	.desc{
		padding-bottom: 30rpx;
	}	
	.otherInfo-title{		
		font-size: 30rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 600;
		color: #333333;
		line-height: 62rpx;
	}
	.otherInfo-desc{
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #666666;
		line-height: 50rpx;
	}
}
</style>